<template>
  <div>
    <div class="msg" v-show="!logon">您还未登录。😥</div>
    <comment-list :comments="comments" v-if="comments.length"></comment-list>
    <div class="books-wrapper" v-if="books.length">
      <div class="title">图书</div>
      <card :books="books"></card>
    </div>
  </div>
</template>

<script>
import Card from '@/components/card.vue'
import CommentList from '@/components/CommentList.vue'

const db = wx.cloud.database()
export default {
  name: 'Comments',
  data () {
    return {
      user: {},
      logon: false, // 当前登录状态
      comments: [],
      books: []
    }
  },
  methods: {
    _init () {
      if (!this.user) { // 未登录
        this.login = false
        return
      }
      this.logon = true
      this._getComments()
      this._getBooks()
    },
    _getComments () {
      db.collection('comments').where({
        _from: {
          _openid: this.user._openid
        }
      })
        .limit(20)
        .get()
        .then(res => {
          this.comments = res.data
        })
    },
    _getBooks () {
      db.collection('books').where({
        userInfo: {
          openId: this.user._openid
        }
      })
        .get()
        .then(res => {
          this.books = res.data
        })
    }
  },
  onShow () {
    this.user = wx.getStorageSync('__USER__')[0]
    this._init()
  },
  components: {
    Card,
    CommentList
  }
}
</script>

<style lang="stylus" scoped>
  .msg
    padding-left 10px
    line-height 40px
    font-size 16px
  .books-wrapper
    .title
      padding-left 10px
      background-color #eeeeee
      line-height 30px
      font-size 16px
      color #333
</style>
